@import '@devui/theme/styles-var/devui-var.scss';

.demo-block {
  border: solid 1px $devui-dividing-line !important;

  &.hover {
    box-shadow: none !important;
  }

  .source {
    overflow: unset !important;

    .demo-spacing {
      & > * {
        margin: 0 8px 8px 0;

        &:last-child {
          margin-right: 0;
        }
      }

      &:last-child {
        & > * {
          margin-bottom: 0;
        }
      }
    }
  }

  .ml {
    &-0 {
      margin-left: 4px;
    }

    &-1 {
      margin-left: 8px;
    }

    &-2 {
      margin-left: 12px;
    }

    &-3 {
      margin-left: 16px;
    }

    &-4 {
      margin-left: 24px;
    }
  }

  .mb {
    &-0 {
      margin-bottom: 4px;
    }

    &-1 {
      margin-bottom: 8px;
    }

    &-2 {
      margin-bottom: 12px;
    }

    &-3 {
      margin-bottom: 16px;
    }

    &-4 {
      margin-bottom: 24px;
    }
  }

  .mr {
    &-0 {
      margin-right: 4px;
    }

    &-1 {
      margin-right: 8px;
    }

    &-2 {
      margin-right: 12px;
    }

    &-3 {
      margin-right: 16px;
    }

    &-4 {
      margin-right: 24px;
    }
  }

  .mt {
    &-0 {
      margin-top: 4px;
    }

    &-1 {
      margin-top: 8px;
    }

    &-2 {
      margin-top: 12px;
    }

    &-3 {
      margin-top: 16px;
    }

    &-4 {
      margin-top: 24px;
    }
  }
}

.demo-block-control {
  background-color: $devui-base-bg !important;
  border-top: solid 1px $devui-dividing-line !important;

  &:hover {
    color: $devui-brand !important;
  }

  .control-button {
    color: $devui-brand !important;
  }
}

.meta {
  border-top: solid 1px $devui-dividing-line !important;
  background-color: $devui-area !important;

  .description {
    border: solid 1px $devui-dividing-line !important;
    color: $devui-text !important;
    background-color: $devui-base-bg !important;
  }
}

[class^='version-tag'] {
  display: inline-block;
  padding: 0 4px;
  line-height: 20px;
  color: #ffffff;
  border-radius: 4px;
}

.version-tag-1 {
  background-color: #3dcca6;
}

.version-tag-2 {
  background-color: #f66f6a;
}
